<template>
    <div class="comment">
        <h3>添加评论</h3>
        <textarea cols="30" rows="4" placeholder="您可以发表不超过120字的评论" maxlength="120" v-model="newComment"></textarea>
        <mt-button size="large" type="primary" @click="postComment">发表评论</mt-button>
        <div class="comment-content">
            <div class="content-item" v-for="(item,index) in comments" :key="item.add_time+index">
                <p class="comment-title">
                    <span>第{{index+1}}楼</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | dateFormat}}</span>
                </p>
                <p class="comment-item">
                    {{item.content===''?'这个家伙很懒，什么都没写':item.content}}
                </p>
            </div>


        </div>
        <mt-button size="large" type="danger" plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        name: "comment",
        data(){
            return {
                pageindex:1,
                comments:[],
                newComment:''
            }
        },
        props:['artid'],
        methods:{
            getComment(){
                this.$http.get('api/getcomments/'+this.artid+'?pageindex='+this.pageindex).then(res=>{
                    console.log(res);
                    // .concat()是数组的拼接方法，
                    this.comments = this.comments.concat(res.body.message)
                },err=>{
                    Toast('获取评论数据失败！')
                })
            },
            getmore(){ //加载更多评论，首先修改pageindex
                this.pageindex++;
                this.getComment()
            },
            postComment(){ //提交评论的方法
                this.$http.post('api/postcomment/'+this.artid,{content:this.newComment}).then(res=>{
                    if (!this.newComment.trim()) {//.trim是字符串的一个方法，作用就是去掉字符串的前后空格
                        Toast('不能添加空的评论！')
                        return
                    }
                        let d = new Date()
                        this.comments.unshift({add_time:d.getTime(),content:this.newComment,user_name:'匿名用户'});
                        this.newComment = ''
                        console.log(res);
                },err=>{
                    Toast('提交评论数据失败！')
                })
            }
        },
        created(){ //页面加载时候调用获取数据的方法
            this.getComment()
        }
    }
</script>

<style scoped lang="scss">
.comment{
    h3{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        height: 90px;
        margin-bottom: 3px;
    }
    .comment-content{
        margin-top: 15px;
        .content-item{
            .comment-title{
                height: 35px;
                background-color: #dfdfdf;
                line-height: 35px;
                color: #333333;
                span{
                    margin-right: 5px;
                }
                span:nth-last-child(1){
                    margin-right: 0;
                }
            }
            .comment-item{
                text-indent: 24px;
            }

        }
    }
}
</style>
